<script lang="ts" setup>
  import { useAppStore } from '@/store';
  import { onBeforeMount, ref, onMounted } from 'vue';
  import dayjs from 'dayjs';
  import {
    getInviteDetail,
    getOperatorDetail,
    deleteInvite,
    passInvite,
  } from '@/api/operator';
  import { useRoute } from 'vue-router';
  import { OperatorInviteItem, OperatorItem } from '@/types/operators';
  import { Message, Modal } from '@arco-design/web-vue';
  import ProvinceJSON from '@/config/province.json';
  import CityJSON from '@/config/city.json';
  import InviteRefuse from './components/invite-refuse.vue';

  const appStore = useAppStore();

  onBeforeMount(() => {
    appStore.updateSettings({
      menu: false,
    });
  });

  const inviteInfo = ref<OperatorInviteItem | null>(null);
  const operatorInfo = ref<OperatorItem | null>(null);
  const loading = ref(false);
  const route = useRoute();

  const getData = async () => {
    try {
      loading.value = true;
      const res = await getInviteDetail(route.query.id as string);
      inviteInfo.value = res?.data?.data || {};

      if (inviteInfo.value.operatorId) {
        const operatorRes = await getOperatorDetail(
          inviteInfo.value.operatorId
        );
        operatorInfo.value = operatorRes?.data?.data || {};

        if (operatorInfo.value.pics) {
          operatorInfo.value.pics = JSON.parse(
            `${operatorInfo.value.pics}` || '[]'
          );
        }
      }
    } finally {
      loading.value = false;
    }
  };

  onMounted(() => {
    getData();
  });

  const passing = ref(false);
  const handlePass = async () => {
    Modal.confirm({
      title: '提示',
      content: '确定通过审核？',
      onBeforeOk: async () => {
        try {
          passing.value = true;
          await passInvite(route.query.id as string);
          Message.success('邀请已通过');
          setTimeout(() => {
            window.close();
          }, 2000);
        } finally {
          passing.value = false;
        }
      },
    });
  };

  const refusing = ref(false);
  const handleRefuse = () => {
    refusing.value = true;
  };
  const handleRefuseDone = (refresh: boolean) => {
    if (refresh) {
      getData();
    }
    refusing.value = false;
  };

  const deleting = ref(false);
  const handleCancel = async () => {
    Modal.confirm({
      title: '提示',
      content: '确定取消邀请？',
      onBeforeOk: async () => {
        try {
          deleting.value = true;
          await deleteInvite(route.query.id as string);
          Message.success('邀请已取消');
          setTimeout(() => {
            window.close();
          }, 2000);
        } finally {
          deleting.value = false;
        }
      },
    });
  };
</script>

<template>
  <div style="width: 1000px; margin: 20px auto">
    <a-card title="执行机构入驻审批" :bordered="false" :loading="loading">
      <template #title>
        <a-space>
          <span>执行机构入驻审批</span>
          <a-tag
            :color="['gray', 'blue', 'orange', 'red'][inviteInfo?.status || 0]"
          >
            {{
              ['待入驻', '已入驻', '待审核', '已拒绝'][inviteInfo?.status || 0]
            }}
          </a-tag>
        </a-space>
      </template>
      <template #extra>
        <a-space>
          <a-button
            v-if="inviteInfo?.status === 2"
            type="primary"
            :loading="passing"
            @click="handlePass"
          >
            审核通过
          </a-button>
          <a-button
            v-if="inviteInfo?.status === 2"
            status="danger"
            @click="handleRefuse"
          >
            拒绝入驻
          </a-button>
          <a-button
            v-if="inviteInfo?.status === 0"
            :loading="deleting"
            @click="handleCancel"
            >取消邀请</a-button
          >
        </a-space>
      </template>
      <a-row :gutter="[20, 20]">
        <a-col v-if="inviteInfo?.status === 3">
          拒绝原因：{{ inviteInfo?.refuseReason }}
        </a-col>
        <a-col>
          <div class="section-title">审批信息</div>

          <div class="info-table">
            <div class="info-table-row">
              <div class="info-table-row-label">邀请执行机构</div>
              <div class="info-table-row-value">{{ inviteInfo?.name }}</div>
            </div>
            <div class="info-table-row">
              <div class="info-table-row-label">管理员手机号</div>
              <div class="info-table-row-value">{{ inviteInfo?.phone }}</div>
            </div>
            <div class="info-table-row">
              <div class="info-table-row-label">邀请人</div>
              <div class="info-table-row-value">{{
                inviteInfo?.createUser?.nickname
              }}</div>
            </div>
            <div class="info-table-row">
              <div class="info-table-row-label">邀请时间</div>
              <div class="info-table-row-value">
                {{ dayjs(inviteInfo?.gmtCreate).format('YYYY/MM/DD HH:mm:ss') }}
              </div>
            </div>
          </div>
        </a-col>

        <a-col>
          <a-divider style="margin: 0" />
        </a-col>

        <a-col v-if="operatorInfo">
          <div class="section-title">机构信息</div>
          <div>
            <div class="info-group">
              <div class="info-group-title">基本信息</div>
              <div class="info-group-content">
                <div>
                  <span class="info-group-field-name">名称：</span>
                  {{ operatorInfo.name }}
                </div>
                <div>
                  <span class="info-group-field-name">省市：</span>
                  {{
                    ProvinceJSON.find((i) => i.id === operatorInfo?.province)
                      ?.name
                  }}
                  {{
                    CityJSON[
                      operatorInfo.province as keyof typeof CityJSON
                    ].find((i) => i.id === operatorInfo?.city)?.name
                  }}
                </div>
                <div>
                  <span class="info-group-field-name">详细地址：</span>
                  {{ operatorInfo.address }}
                </div>
                <div>
                  <span class="info-group-field-name">LOGO：</span>
                  <div>
                    <a-image :src="operatorInfo.logo" width="120" />
                  </div>
                </div>
                <div>
                  <span class="info-group-field-name">机构图片：</span>
                  <div>
                    <a-row :gutter="[10, 10]">
                      <a-col
                        v-for="pic in operatorInfo.pics"
                        :key="pic"
                        flex="none"
                        style="width: 130px"
                      >
                        <a-image :src="pic" width="120" />
                      </a-col>
                    </a-row>
                  </div>
                </div>
                <div>
                  <span class="info-group-field-name">营业执照：</span>
                  <div>
                    <a-image :src="operatorInfo.license" width="120" />
                  </div>
                </div>
                <div>
                  <span class="info-group-field-name">机构介绍：</span>
                  <div>{{ operatorInfo.introduction }}</div>
                </div>
              </div>
            </div>

            <div class="info-group">
              <div class="info-group-title">联系信息</div>
              <div class="info-group-content">
                <div>
                  <span class="info-group-field-name">联系人名称：</span>
                  {{ operatorInfo.contactName }}
                </div>
                <div>
                  <span class="info-group-field-name">联系人电话：</span>
                  {{ operatorInfo.contactTel }}
                </div>
                <div>
                  <span class="info-group-field-name">联系邮箱：</span>
                  {{ operatorInfo.contactEmail }}
                </div>
              </div>
            </div>

            <div class="info-group">
              <div class="info-group-title">收款信息</div>
              <div class="info-group-content">
                <div>
                  <span class="info-group-field-name">账户名称：</span>
                  {{ operatorInfo.bankAccount }}
                </div>
                <div>
                  <span class="info-group-field-name">账户号码：</span>
                  {{ operatorInfo.bankNumber }}
                </div>
                <div>
                  <span class="info-group-field-name">开户行：</span>
                  {{ operatorInfo.bankName }}
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-card>

    <InviteRefuse
      v-if="refusing"
      :invite-id="(route.query.id as string)"
      @close="handleRefuseDone"
    />
  </div>
</template>

<style lang="less" scoped>
  .section-title {
    font-size: 15px;
    color: var(--color-text-1);
    font-weight: 500;
    margin-bottom: 12px;
  }
  .info-table {
    margin: 12px 0;

    &-row {
      display: flex;
      align-items: center;
      margin: 0 0 12px;

      &-label {
        color: var(--color-text-1);
        width: 120px;
      }

      &-value {
        color: var(--color-text-1);
        font-weight: 500;
      }
    }
  }

  .info-group {
    margin-bottom: 20px;

    &-title {
      color: var(--color-text-1);
      font-weight: 500;
      margin-bottom: 10px;
    }

    &-content {
      color: var(--color-text-1);
      line-height: 20px;
      & > div {
        margin-bottom: 10px;
      }
    }

    &-field-name {
      color: var(--color-text-2);
    }
  }
</style>
